NSMobile.views.network = Ext.extend(Ext.Panel, {
    layout: 'card',
    iconCls: 'user_list ' + syncClass,
    title: 'Network',
    cls: 'Network',
    cardSwitchAnimation: false,
    initComponent: function () {
        NSMobile.stores.customerContactsPaginated.load();
        var contactPanel = new Ext.TabPanel({
            cardSwitchAnimation: false,
            id: 'contactpanel',
            ui: 'dark',
			padding: '0',
			margin: '0',
			centered: true,
			style: 'font-size:.9em;',
            items: [
                {
                    xtype: 'networkgroup'
                },
	            {
	                xtype: 'networkteam'
	            },
                {
                    xtype: 'networkcustomers'
                }
	        ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    title: 'My Network',
                    items: [
                        {
                            xtype: 'spacer'
                        },
                        {
                            hidden: true,
                            iconMask: true,
                            iconCls: 'search',
//                            handler: function () {
//                                if (Ext.getCmp('networksearchbar').hidden) {
//                                    Ext.getCmp('networksearchbar').show();
//                                   // setTimeout(function () { Ext.getCmp('contactpanel').setSize(0, 0) }, 1); //hax

//                                    if (this.el.dom.classList)
//                                        this.el.dom.classList.toggle('x-button-pressed');
//                                    else {
//                                        if (iconEl.className.indexOf('x-button-pressed') > -1)
//                                            iconEl.className = iconEl.className.replace('x-button-pressed', '').trim();
//                                        else
//                                            iconEl.className += ' x-button-pressed';
//                                    }
//                                }
//                                else
//                                    Ext.getCmp('networksearchbar').hide({ type: 'slide', direction: 'up',
//                                        after: function () {
//                                         //   setTimeout(function () { Ext.getCmp('contactpanel').setSize(0, 0) }, 1);
//                                        }
//                                    });
//                            }
                        }
                    ]
                },
                {
                    dock: 'bottom',
                    xtype: 'toolbar',
                    id: 'networksearchbar',
                    items: [
                        {
                            xtype: 'spacer'
                        },
                        {
                            xtype: 'searchfield',
                            placeHolder: 'Search',
                            id: 'networksearch',
                            width: '98%',
                            listeners: {
                                change: function (field, newValue, oldValue) {
                                    NSMobile.stores.groupContactsPaginated.clearFilter();
                                    NSMobile.stores.teamContactsPaginated.clearFilter();
                                    NSMobile.stores.customerContactsPaginated.clearFilter();

                                    NSMobile.stores.groupContactsPaginated.sorters.clear();
                                    NSMobile.stores.teamContactsPaginated.sorters.clear();
                                    NSMobile.stores.customerContactsPaginated.sorters.clear();

                                    if (newValue) {
                                        NSMobile.stores.groupContactsPaginated.filter('name', newValue);
                                        NSMobile.stores.teamContactsPaginated.filter('name', newValue);
                                        NSMobile.stores.customerContactsPaginated.filter('name', newValue);
                                    }
                                    else if(newValue != oldValue) {
                                        NSMobile.stores.groupContactsPaginated.loadPage(1);
                                        NSMobile.stores.teamContactsPaginated.loadPage(1);
                                        NSMobile.stores.customerContactsPaginated.loadPage(1);
                                    }
                                }
                            }
                        },
                        {
                            xtype: 'spacer'
                        }
                    ]
                }
            ],
            defaults: {
                cls: 'networkList'
            }
        });

        var contactDetail = new Ext.Panel({
            scroll: 'vertical',
            id: 'contactdetail',
            cls: 'networkDetails',
            tpl: [
                '<div id="contactInfo" class="detail">',
                    '<section class="contactPhoto">',
						'<p class="contactThumb"><img src="{[(values.thumb.indexOf(":") == -1 && values.thumb.indexOf("lib/") != 0) ? imageURI : ""]}{thumb}" /> <span class="nameDisplay">{firstName} {lastName}</span></p>',
					'</section>',
					'<div class="detailsList contactDetails">',
                        '<tpl if="category == \'Personal\'">',
                            '<p><span class="label">Address:</span><span class="data">{address}</span></p>',
                            '<p><span class="label">Email:</span><span class="data"><a href="mailto:{email}">{email}</a></span></p>',
                            '<p><span class="label">Home:</span><span class="data"><a href="tel:{[values.homephone.replace(/[() -]/g, "")]}">{homephone}</a></span><tpl if="commpref == \'home\'"><span class="perferred"></span></tpl></p>',
                    	    '<p><span class="label">Mobile:</span><span class="data"><a href="tel:{[values.mobilephone.replace(/[() -]/g, "")]}">{mobilephone}</a></span><tpl if="commpref == \'mobile\'"><span class="perferred"></span></tpl></p>',
                    	    '<p><span class="label">Work:</span><span class="data"><a href="tel:{[values.workphone.replace(/[() -]/g, "")]}">{workphone}</a></span><tpl if="commpref == \'work\'"><span class="perferred"></span></tpl></p>',
                            '<p><span class="label">Birthdate:</span><span class="data">{birthdate:date("m/d")}</span></p>',
                            '<p><span class="label">Category:</span><span class="data">{category}</span></p>',
                            '<p><span class="label">Last Purchase:</span><span class="data">{lastpurchasedate:date("m/d/Y")}</span></p>',
                        '</tpl>',
                        '<tpl if="category != \'Personal\'">',
                            '<p><span class="label">Birthdate:</span><span class="data">{birthdate:date("m/d")}</span></p>',
                    	    '<p><span class="label">Gender:</span><span class="data">{gender}</span></p>',
                    	    '<p><span class="label">Category:</span><span class="data">{category}</span></p>',
                    	    '<p><span class="label">Home:</span><span class="data"><a href="tel:{[values.homephone.replace(/[() -]/g, "")]}">{homephone}</a></span><tpl if="commpref == \'home\'"><span class="perferred"></span></tpl></p>',
                    	    '<p><span class="label">Mobile:</span><span class="data"><a href="tel:{[values.mobilephone.replace(/[() -]/g, "")]}">{mobilephone}</a></span><tpl if="commpref == \'mobile\'"><span class="perferred"></span></tpl></p>',
                    	    '<p><span class="label">Work:</span><span class="data"><a href="tel:{[values.workphone.replace(/[() -]/g, "")]}">{workphone}</a></span><tpl if="commpref == \'work\'"><span class="perferred"></span></tpl></p>',
                    	    '<p><span class="label">Email:</span><span class="data"><a href="mailto:{email}">{email}</a></span></p>',
                    	    '<p><span class="label">Address:</span><span class="data">{address}</span></p>',
                        '</tpl>',
					'</div>',
                '</div>'
            ],
            dockedItems: [
                {
                    id: 'contactdetailtoolbar',
                    xtype: 'toolbar',
                    items: [
                        {
                            text: 'Back',
                            ui: 'back',
                            handler: function () {
                                var detail = Ext.getCmp('contactdetail');
                                if (detail.cameFromPerf) {
                                    NSMobile.views.viewport.setActiveItem(1);
                                    Ext.getCmp('network').setActiveItem(1);
                                    Ext.getCmp('network').setActiveItem(0);
                                }
                                else
                                    Ext.getCmp('network').layout.prev(pageBackAnimation);
                                detail.cameFromPerf = false;
                            }
                        }
                    ]
                }
            ],
            cameFromPerf: false
        });
        Ext.apply(this, {
            items: [
                contactPanel,
                contactDetail
            ]
        });

        NSMobile.views.network.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('network', NSMobile.views.network);